<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>表单模块 - layui</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />

    <link rel="stylesheet" href="./assets/dist/css/layui.css" />
    <style>
      body {
        padding: 16px;
      }
    </style>
  </head>
  <body>
    <form class="layui-form" method="get" lay-filter="top">
      <div class="layui-row layui-col-space16">
        <div class="layui-col-md3">
          <div class="layui-input-group">
            <div class="layui-input-split layui-input-prefix">前置信息</div>
            <input
              type="text"
              name="arr[]"
              required
              lay-verify="required"
              placeholder="请输入"
              autocomplete="off"
              class="layui-input"
              lay-affix="clear"
            />
            <div class="layui-input-split layui-input-suffix">后置信息</div>
          </div>
        </div>
        <div class="layui-col-md3">
          <div class="layui-input-wrap">
            <input
              type="text"
              name="arr[]"
              required
              placeholder="请输入"
              autocomplete="off"
              class="layui-input"
            />
            <div class="layui-input-split">
              <i class="layui-icon layui-icon-down"></i>
            </div>
          </div>
        </div>
        <div class="layui-col-md3">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-username"></i>
            </div>
            <input
              type="text"
              name="arr[]"
              value=""
              required
              placeholder="请输入"
              autocomplete="off"
              class="layui-input"
              lay-affix="clear"
            />
          </div>
        </div>
        <div class="layui-col-md3">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-password"></i>
            </div>
            <input
              type="password"
              name="arr[]"
              value=""
              required
              placeholder="请输入"
              autocomplete="off"
              class="layui-input"
              lay-affix="eye"
            />
          </div>
        </div>
        <div class="layui-col-md3">
          <div class="layui-input-wrap">
            <input
              type="text"
              name="arr[]"
              value=""
              required
              placeholder="自定义动态点缀图标"
              autocomplete="off"
              class="layui-input"
              lay-affix="set"
              lay-filter="set"
            />
          </div>
        </div>
        <div class="layui-col-md3">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix layui-input-split">
              <i class="layui-icon layui-icon-username"></i>
            </div>
            <input
              type="text"
              name="arr[]"
              value=""
              required
              placeholder="请输入"
              autocomplete="off"
              class="layui-input"
              lay-affix="clear"
            />
          </div>
        </div>
        <div class="layui-col-md3">
          <div class="layui-input-wrap">
            <input
              type="text"
              name="arr[]"
              value=""
              required
              placeholder="请输入"
              autocomplete="off"
              class="layui-input"
              lay-affix="clear"
            />
          </div>
        </div>
        <div class="layui-col-md3">
          <div class="layui-input-wrap">
            <input
              type="text"
              name="arr[]"
              value="禁用或只读状态"
              disabled
              placeholder="请输入"
              autocomplete="off"
              class="layui-input"
              lay-affix="clear"
            />
          </div>
        </div>
        <div class="layui-col-md3">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-date"></i>
            </div>
            <input
              type="text"
              name="arr[]"
              required
              placeholder="前缀和后缀"
              autocomplete="off"
              class="layui-input"
            />
            <div class="layui-input-suffix">
              <i class="layui-icon layui-icon-down"></i>
            </div>
          </div>
        </div>
        <div class="layui-col-md3">
          <div class="layui-input-wrap">
            <input
              type="text"
              name="arr[]"
              required
              placeholder="后缀+clear"
              lay-affix="clear"
              autocomplete="off"
              class="layui-input"
            />
            <div class="layui-input-suffix">
              <i class="layui-icon layui-icon-more-vertical"></i>
            </div>
          </div>
        </div>
        <div class="layui-col-md3">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-username"></i>
            </div>
            <select name="selectdemo">
              <option value="">在 select 中使用</option>
              <option value="北京">北京</option>
              <option value="上海">上海</option>
              <option value="广州">广州</option>
              <option value="深圳">深圳</option>
            </select>
          </div>
        </div>
        <div class="layui-col-md3">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-date"></i>
            </div>
            <input
              type="text"
              name="arr[]"
              required
              placeholder="前缀和后缀+动态点缀"
              autocomplete="off"
              class="layui-input"
              lay-affix="clear"
            />
            <div class="layui-input-suffix">
              <i class="layui-icon layui-icon-down"></i>
            </div>
          </div>
        </div>
        <div class="layui-col-md3">
          <input
            type="number"
            value="1.1"
            lay-precision="0"
            name="arr[]"
            required
            placeholder="数字输入框"
            lay-affix="number"
            autocomplete="off"
            class="layui-input"
          />
        </div>
        <div class="layui-col-md3">
          <input
            type="number"
            step="0.01"
            min="0"
            max="10"
            name="arr[]"
            required
            placeholder="数字输入框"
            lay-affix="number"
            autocomplete="off"
            class="layui-input"
          />
        </div>
        <div class="layui-col-md3">
          <input
            type="number"
            step="0.01"
            min="0"
            max="10"
            name="arr[]"
            required
            placeholder="系统自带数字输入框"
            autocomplete="off"
            class="layui-input"
          />
        </div>
        <div class="layui-col-md3">
          <input
            type="number"
            disabled
            name="arr[]"
            required
            placeholder="数字输入框 禁用状态"
            lay-affix="number"
            autocomplete="off"
            class="layui-input"
          />
        </div>
        <div class="layui-col-md12">
          <div class="layui-input-wrap">
            <textarea class="layui-textarea" lay-affix="clear"></textarea>
          </div>
        </div>
        <div class="layui-col-md12">
          <button class="layui-btn" id="testSubmit">立即提交</button>
        </div>
      </div>
    </form>

    <hr />

    <form class="layui-form layui-form-pane1" action="" lay-filter="first">
      <div class="layui-form-item">
        <label class="layui-form-label">输入框</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="title"
            lay-verify="required|title"
            lay-reqText="标题不能为空"
            required
            placeholder="请输入标题"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">手机</label>
        <div class="layui-input-block">
          <input
            type="tel"
            name="phone"
            lay-verify="required|phone"
            autocomplete="off"
            class="layui-input demo-phone"
          />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">验证码</label>
        <div class="layui-input-inline">
          <input
            type="text"
            name="vercode"
            lay-verify="required"
            autocomplete="off"
            class="layui-input"
          />
        </div>
        <div class="layui-form-mid" style="padding: 0 !important">
          <button
            type="button"
            class="layui-btn layui-btn-primary"
            lay-on="get-vercode"
          >
            获取验证码
          </button>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
          <input
            type="email"
            name="email"
            lay-verify="email"
            lay-vertype="alert"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">生日</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="date"
            id="date"
            lay-verify="date"
            placeholder="yyyy-MM-dd"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
          <input
            type="password"
            name="password"
            lay-verify="required|pass"
            placeholder="请输入密码"
            autocomplete="off"
            class="layui-input"
          />
        </div>
        <div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">范围</label>
          <div class="layui-input-inline" style="width: 100px">
            <input
              type="text"
              name="price_min"
              placeholder="￥"
              autocomplete="off"
              class="layui-input"
            />
          </div>
          <div class="layui-form-mid">-</div>
          <div class="layui-input-inline" style="width: 100px">
            <input
              type="text"
              name="price_max"
              placeholder="￥"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">行内表单</label>
          <div class="layui-input-block">
            <select
              name="quiz"
              lay-verify="required"
              lay-vertype="tips"
              lay-filter="quiz"
            >
              <option value="">请"选择"问题&nbsp;&nbsp;&nbsp;😀</option>
              <option value="0">你工"作"的 第一个城市</option>
              <option value="1" disabled>你的工号</option>
              <option value="2">你最喜欢的老师</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">select分组</label>
          <div class="layui-input-block">
            <select name="quiz111" lay-filter="quiz111">
              <option value="">请选择问题</option>
              <optgroup label="城市记忆">
                <option value="0">你工作的第一个城市</option>
              </optgroup>
              <optgroup label="学生时代">
                <option value="1" disabled>你的工号</option>
                <option value="2">你最喜欢的老师</option>
              </optgroup>
            </select>
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">选择框</label>
        <div class="layui-input-block">
          <select name="interest" lay-filter="interest">
            <option value=""></option>
            <option value="0">写作</option>
            <option value="1">阅读</option>
            <option value="2">游戏</option>
            <option value="3">音乐</option>
            <option value="4">旅行</option>
          </select>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">搜索选择框</label>
          <div class="layui-input-block">
            <select
              name="interest-search"
              lay-filter="interest-search"
              lay-search=""
              lay-creatable
            >
              <option value="">请搜索</option>
              <option value="写作">写"作"</option>
              <option value="阅读" disabled>阅读</option>
              <option value="游戏" disabled>游戏</option>
              <option value="音乐">音乐</option>
              <option value="旅行">旅行</option>
              <option value="读书">读书</option>
              <option value="1">layer</option>
              <option value="2" disabled>laydate</option>
              <option value="3">3</option>
              <option value="4">layim</option>
              <option value="5">laypage</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">搜索分组框</label>
          <div class="layui-input-block">
            <select
              name="interest-search-group"
              lay-filter="interest-search-group"
              lay-search=""
            >
              <option value="">请搜索</option>
              <optgroup label="分组a">
                <option value="a1">a1</option>
                <option value="a2">a2</option>
              </optgroup>
              <optgroup label="分组aa">
                <option value="aa1">aA1</option>
                <option value="aa2">aA2</option>
              </optgroup>
              <optgroup label="分组b">
                <option value="b1">b1</option>
                <option value="b2">b2</option>
              </optgroup>
              <optgroup label="分组bb">
                <option value="bb1">bb1</option>
                <option value="bb2">bb2</option>
              </optgroup>
              <optgroup label="分组bbb">
                <option value="bbb1">bBb1</option>
                <option value="bbb2">bBB2</option>
              </optgroup>
              <optgroup label="分组c">
                <option value="c1">c1</option>
                <option value="c2">c2</option>
              </optgroup>
              <optgroup label="分组cc">
                <option value="cc1">cc1</option>
                <option value="cc2">cc2</option>
              </optgroup>
              <optgroup label="分组ccc">
                <option value="ccc1">ccc1</option>
                <option value="ccc2">ccc2</option>
              </optgroup>
              <optgroup label="分组cccc">
                <option value="cccc1">cccc1</option>
                <option value="cccc2">cccc2</option>
              </optgroup>
            </select>
          </div>
        </div>
      </div>

      <div class="layui-form-item" pane>
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
          <input type="checkbox" name="like[write]" title="写作" />
          <input type="checkbox" name="like[read]" title="阅读" />
          <input type="checkbox" name="like[game]" title="游戏" disabled />
          <input
            type="checkbox"
            name="like[indeterminate]"
            id="ID-indeterminate"
            lay-filter="filter-indeterminate"
            title="半选"
          />
        </div>
      </div>
      <div class="layui-form-item" pane>
        <label class="layui-form-label">标签框</label>
        <div class="layui-input-block">
          <input
            type="checkbox"
            name="like1[write]"
            lay-skin="tag"
            title="写作"
          />
          <input
            type="checkbox"
            name="like1[read]"
            lay-skin="tag"
            title="阅读"
          />
          <input
            type="checkbox"
            name="like1[game]"
            lay-skin="tag"
            title="游戏"
            disabled
          />
        </div>
      </div>
      <div class="layui-form-item" pane>
        <label class="layui-form-label">开关关</label>
        <div class="layui-input-block">
          <input type="checkbox" name="close" lay-skin="switch" title="开关" />
          <input
            type="checkbox"
            name="close2"
            lay-skin="switch"
            title="|OFF"
            disabled
          />
        </div>
      </div>
      <div class="layui-form-item" pane>
        <label class="layui-form-label">开关开</label>
        <div class="layui-input-block">
          <input
            type="checkbox"
            checked
            name="open"
            lay-skin="switch"
            lay-filter="switchTest"
            title="ON|OFF"
          />
          <input
            type="checkbox"
            name="open2"
            lay-skin="switch"
            lay-filter="switchTest"
            title="已绑定|绑定"
          />
        </div>
      </div>
      <div class="layui-form-item" pane>
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
          <input type="radio" name="sex" value="1" title="男" />
          <input type="radio" name="sex" value="0" title="女" checked />
          <input type="radio" name="sex" value="-1" />
          <div lay-radio>保密 <i class="layui-icon layui-icon-user"></i></div>
          <input type="radio" name="sex" value="" title="禁用" disabled />
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">请填写描述</label>
        <div class="layui-input-block">
          <textarea
            placeholder="请输入内容"
            class="layui-textarea"
            name="desc"
          ></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>

    <br /><br /><br />

    <script
      src="./assets/dist/layui.js"
      src1="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.js"
    ></script>
    <script>
      layui.use(['form', 'util', 'laydate'], () => {
        var $ = layui.$;
        var form = layui.form;
        var layer = layui.layer;
        var util = layui.util;
        var laydate = layui.laydate;

        // 自定义验证规则
        form.verify({
          title: (value) => {
            if (value && value.length < 5) {
              // 值若填写时才校验
              return '标题也太短了吧';
            }
          },
          pass: (value) => {
            if (!/(.+){6,12}$/.test(value)) {
              return '密码必须 6 到 12 位';
            }
          },
          amount: (value) => {
            if (value && !/^\d+\.\b\d{2}\b$/.test(value)) {
              // 值若填写时才校验
              return '金额必须为小数保留两位';
            }
          },
        });

        /*
    form.on('submit(top)', function(data){
      console.log(data);
      return false;
    });
    */

        //方法提交
        $('#testSubmit').on('click', () => {
          form.submit('top', (data) => {
            layer.confirm('确定提交么？', (index) => {
              layer.close(index);

              // 验证均通过后执行提交
              setTimeout(() => {
                alert(JSON.stringify(data.field));
              });
            });
          });
          return false;
        });

        //日期
        laydate.render({
          elem: '#date',
        });

        //初始赋值
        var thisValue = form.val('first', {
          title: '测试测试测试',
          //,'phone': 11111111111
          email: 'xu@sentsin.com',
          date: '2021-05-30',
          password: 123123,
          //,'quiz': 2
          interest: 3,
          'like[write]': true,
          //,'open': false
          sex: '0',
          desc: 'form 是我们非常看重的一块',
          xxxxxxxxx: 123,
        });

        // 自定义动态点缀事件
        form.on('input-affix(set)', (data) => {
          var elem = data.elem;
          elem.value = '通过自定义事件设置的值';
        });

        //事件
        form.on('select(quiz)', function (data) {
          console.log('select.quiz: ', this, data);
        });

        form.on('select(quiz111)', function (data) {
          console.log('select.quiz111：', this, data);
        });

        form.on('select(interest)', function (data) {
          console.log('select.interest: ', this, data);
        });

        form.on('checkbox', function (data) {
          console.log(this.checked, data.elem.checked);
        });

        form.on('switch', (data) => {
          console.log(data);
        });

        form.on('radio', (data) => {
          console.log(data);
        });

        // 提交事件
        form.on('submit(*)', (data) => {
          console.log(data);
          alert(JSON.stringify(data.field));
          return false;
        });

        // 设置半选
        $('#ID-indeterminate').prop('indeterminate', true);
        form.render('checkbox');

        // 普通事件
        util.on('lay-on', {
          'get-vercode': (othis) => {
            var isvalid = form.validate('.demo-phone');

            // 验证通过
            if (isvalid) {
              layer.msg('手机号验证通过，执行发送验证码的操作');
            }
          },
        });
      });
    </script>

    <h3>设置 lay-ignore 忽略渲染</h3>
    <hr />
    <div class="layui-form">
      <div class="layui-form-item">
        <div class="layui-inline">未设置 ignore 时：</div>
        <div class="layui-inline">
          <input type="checkbox" name="like[write]" title="checkbox" />
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">忽略指令直接设置：</div>
        <div class="layui-inline">
          <input type="checkbox" name="like[write]" lay-ignore title="写作" />
          <input type="radio" name="sex" value="1" lay-ignore title="男" />
          <select name="quiz" lay-ignore>
            <option value="">请选择</option>
            <option value="AAAAA" selected>AAAAA</option>
            <option value="BBBBB">BBBBB</option>
            <option value="CCCCC">CCCCC</option>
            <option value="DDDDD" disabled>DDDDD</option>
            <option value="EEEEE">EEEEE</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">忽略指令父元素设置：</div>
        <div class="layui-inline" lay-ignore>
          <input type="checkbox" name="like[write]" title="写作" />
          <input type="radio" name="sex" value="1" title="男" />
          <select name="quiz111">
            <option value="">请选择</option>
            <option value="AAAAA">AAAAA</option>
            <option value="BBBBB">BBBBB</option>
            <option value="CCCCC" selected>CCCCC</option>
            <option value="DDDDD" disabled>DDDDD</option>
            <option value="EEEEE">EEEEE</option>
          </select>
        </div>
      </div>
    </div>

    <h3>原始表单调试：</h3>
    <hr />
    <form id="test1" action="" target="_blank">
      <input type="radio" value="girl" disabled />
      <input type="checkbox" name="love[a]" />
      <input type="checkbox" name="love[b]" />
      <input value="1" />
      <input name="as" />
      <input name="=" value="2" />
      <select name="quiz">
        <option value="">请选择问题</option>
        <option disabled value="你工作的第一个城市">你工作的第一个城市</option>
        <option value="你的工号">你的工号</option>
        <option value="你最喜欢的老师">你最喜欢的老师</option>
        <option value="你的工号" selected>你的工号</option>
        <option value="你的工号">你的工号</option>
      </select>
      <button type="submit">原始表单，测试提交</button>
    </form>

    <br /><br />
  </body>
</html>
